<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.m-checkbox, .m-checkbox .bg {
			width: 60px;
			height: 30px;
			display: inline-block;
			border-radius: 30px;
			position: relative;
		}

		.m-checkbox .bg {
			background-color: green;
		}

		.m-checkbox i {
		    display: block;
		    height: 28px;
		    width: 28px;
		    background-color: #fff;
		    border-radius: 14px;
		    position: absolute;
		    left: 1px;
		    top: 1px;
		    transition: left 0.1s;
		    z-index: 8;
		}

		.m-checkbox input[type=checkbox] {
			position: absolute;
		    z-index: 9;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    opacity: 0;
		}

		.m-checkbox input[type=checkbox]:checked + i { /* 紧邻，同辈，后面 */
			left: 31px;
		}

		.m-checkbox input[type=checkbox]:checked ~ .bg { /* 同辈，后面 */
			background-color: #ccc;
		}
	</style>
</head>
<body>

	<span class="m-checkbox">
		<input type="checkbox">
		<i></i>
		<span class="bg"></span>
	</span>
	
</body>
</html>